<template>
  <!-- animation动画的使用 过渡css动画 -->
  <button @click="btnClick">Toggle</button>

  <transition name="bounce">
    <div v-if="isShow">
      东临碣石，以观沧海，水何澹澹，山岛竦峙,
      日月之行若出其中，星汉灿烂若出其里， 幸甚至哉，歌以咏志。
    </div>
  </transition>
</template>
<script setup>
import { ref } from "vue";
const isShow = ref(true);
function btnClick() {
  isShow.value = !isShow.value;
}
</script>
<style scoped>
.bounce-enter-active {
  animation: bounce-in 1s ease;
}
/* 翻转 reverse */
.bounce-leave-active {
  animation: bounce-in 1s ease reverse;
}
/* 自定义 动画 几帧 */
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    /* 缩放 */
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>
